<template>
  <!-- 学员详情页面 -->
  <div class="stu-detail">
    <van-sticky v-if="from == 'StudentInfo'||from == 'BindStuds'">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" @change="onChange" />
      </van-dropdown-menu>
    </van-sticky>
    <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;margin-left:13px;">基本信息</p>
    <van-cell-group v-for="(item,index) in stus" :key="index">
      <van-field
        class="mlabel"
        label="学员姓名："
        :value="item.studentName"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="性别："
        :value="item.studentGender"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="身份证号："
        :value="item.identityCardID"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="出生日期："
        :value="item.birthDate"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="所在班级："
        v-if="item.className"
        :value="item.className"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="已购课程；"
        v-if="item.purchasedCourses"
        :value="item.purchasedCourses"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="校园卡卡号："
        :value="item.cardID"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="入学日期："
        :value="item.enrollmentDate"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="学籍号："
        :value="item.studentCode"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="入学年龄："
        :value="item.enrollmentAge"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="联系地址："
        :value="item.contactAddress"
        placeholder="-"
        label-width="100"
        readonly
      />
    </van-cell-group>
    <p
      style="color: rgba(16, 16, 16, 0.65);font-size: 13px;margin-left:13px;"
      v-if="parents.length != 0"
    >家长信息</p>
    <van-cell-group v-for="(item,index) in parents" :key="index" class="parent">
      <div style="height:14px;background-color:#fff;" />
      <van-field
        class="mlabel"
        label="姓名："
        :value="item.name"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="关系："
        :value="item.relation"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="学历："
        :value="item.education"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="单位："
        :value="item.company"
        placeholder="-"
        label-width="100"
        readonly
      />
      <van-field
        class="mlabel"
        label="联系电话："
        :value="item.telephone"
        placeholder="-"
        label-width="100"
        readonly
      />
    </van-cell-group>
  </div>
</template>

<script>
import { GetStuDetails, LoadBindCampus } from "@/api/personal";
import { GetStuInfo } from "@/api/order";
import { mapGetters } from "vuex";
import { Toast, Dialog } from "vant";
export default {
  data() {
    return {
      value: 0,
      option: [],
      parents: [], //家长信息
      stus: [], //学员信息
      studentID: "", //学员id信息
      from: "" //来自哪个页面
    };
  },
  methods: {
    // 改变校区
    async onChange(e) {
      this.value = e;
      const result = await GetStuDetails({
        studentID: this.studentID,
        campusID: this.value
      });
      if (result.result == "OK") {
        this.setInitData(result.data);
      } else {
        this.stus = [];
        this.parents = [];
        Toast.fail("暂无找到有效信息！");
      }
    },
    //整理页面数据
    setInitData(value) {
      this.stus = value;
      value.forEach((items, index) => {
        if (items.parentinfos != null) {
          items.parentinfos.forEach((item, key) => {
            this.parents.push(item);
          });
        }
      });
    }
  },
  async created() {
    Toast.loading({
      forbidClick: true,
      duration: 0
    });
    const { from, studentID, campusID, orderID } = this.$route.params;
    // 初始化校区值--获取校区
    const res = await LoadBindCampus({
      parentAccount: this.phone,
      studentID: studentID
    });
    if (res.result == "OK") {
      res.data.forEach((item, index) => {
        this.option.push({
          text: item.campusName,
          value: item.campusID
        });
        this.value = this.option[0].value;
      });
    }

    //根据不用页面进入 请求不同接口
    if (from == "StudentInfo") {
      //从学员列表页面进入
      this.from = from;
      this.studentID = studentID; //设置学员id
      // 获取学员信息
      const result = await GetStuDetails({
        studentID: this.studentID,
        campusID: this.value
      });
      if (result.result == "OK") {
        this.setInitData(result.data);
      }
    } else if (from == "BindStuds") {
      //绑定成功进入
      this.from = from;
      this.studentID = studentID;
      this.value = campusID;
      const result = await GetStuDetails({
        studentID: this.studentID,
        campusID: this.value
      });
      if (result.result == "OK") {
        this.setInitData(result.data);
      }
    } else {
      // 从已完成订单页面进入
      const result = await GetStuInfo({ orderID: orderID });
      if (result.result == "OK") {
        this.setInitData(result.data);
      } else {
        Dialog.confirm({
          title: "错误",
          message: result.msg
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      }
    }
    Toast.clear();
  },
  computed: {
    ...mapGetters({ phone: "getPhone" })
  }
};
</script>

<style scoped>
.mlabel {
  color: rgba(16, 16, 16, 0.65);
  font-size: 13px;
}
.parent .van-field {
  background-color: #fafafa;
}
.stu-detail {
  display: flex;
  flex-direction: column;
}
</style>